<template>
  <view class="address-half-screen">
    <mp-half-screen-dialog extClass="address-half-screen" :show="show" @close="close">
      <view slot="title" class="half-title">
        <text class="title">自提地址列表</text>
      </view>

      <view slot="desc">
        <view class="addSelect">
          <cityCom ref="childChoseCity" @getPropsAddress="getPropsAddress"></cityCom>
        </view>

        <scroll-view v-if="addList.length" scroll-y="true" style="height: 66vh" class="desc">
          <radio-group>
            <view v-for="item in addList" :key="item.id">
              <mp-slideview ext-class="cell-flex">
                <view class="address-list">
                  <view class="info" @click="selectAdd(item)">
                    <label class="radio">
                      <radio
                        v-show="curIndex === item.id"
                        :checked="curIndex === item.id"
                        color="#F34E1C"
                        style="transform: scale(0.8)"
                      />

                      <view class="add-txt">
                        <view class="shipping">
                          <text v-if="item.state" class="badge">默认</text>
                        </view>
                        <view class="name">{{ item.name }}</view>
                        <view class="a_street">
                          {{ item.provinceName }}{{ item.cityName }}{{ item.areaName }}{{ item.street }}
                        </view>
                      </view>
                    </label>
                  </view>
                </view>
              </mp-slideview>
            </view>
          </radio-group>
        </scroll-view>

        <view v-else class="no-con">很抱歉,当前省市尚未开通服务</view>
      </view>
    </mp-half-screen-dialog>
  </view>
</template>
<script>
import { selfDelivery } from '@/api/drugInfo.js';
import cityCom from '@/components/cityCom';

export default {
  components: { cityCom },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    orderId: {
      type: String
    }
  },
  data() {
    return {
      curIndex: '',
      addList: []
    };
  },

  methods: {
    close() {
      this.$emit('close');
    },

    selectAdd(item) {
      this.curIndex = item.id;

      const _info = {
        name: item.name,
        machineNumber: '',
        address: {
          provinceId: item.provinceId,
          provinceName: item.provinceName,
          cityId: item.cityId,
          cityName: item.cityName,
          areaId: item.areaId,
          areaName: item.areaName
        },
        street: item.street,
        state: item.state,
        id: item.id
      };
      this.$store.commit('assess/SET_ADDRESS', _info);

      this.$emit('close');
    },

    // 获取省市区
    async getPropsAddress(item) {
      const res = await selfDelivery(this.orderId, {
        // const res = await selfDelivery(1328, {
        provinceId: item[0],
        cityId: item[1]
      });
      this.addList = res.data || [];
      console.log(res);
    }
  }
};
</script>

<style lang="scss">
/*
css样式问题: 需要在父组件增加样式:
.address-half-screen {
    background: $uni-bg-color;
    padding: 0 !important;
    .weui-half-screen-dialog__hd__side {
      left: 91vw;
    }
  }
 */

.addSelect {
  text-align: center;
  margin: 0 24rpx 24rpx;
  height: 60rpx;
  border-radius: 10rpx;
  line-height: 60rpx;
  margin-top: -22rpx;
}
.no-con {
  height: 65vh;
  text-align: center;
  font-size: 32rpx;
  line-height: 300rpx;
  color: rgba(0, 0, 0, 0.55);
}

.half-title .title {
  font-size: 36rpx;
}
.cell-flex {
  display: flex;
}
.desc .address-list {
  margin: 24rpx;
  margin-top: 0;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx 24rpx;
  display: flex;
  .info {
    flex: 1;
  }
  .icons {
    width: 60rpx;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .radio {
    display: flex;
    align-items: center;
  }
  .badge {
    background: #f34e1c;
    border-radius: 4px;
    font-size: 24rpx;
    color: #ffffff;
    padding: 2px 4px;
    margin-right: 10rpx;
  }
  .add-txt {
    margin-left: 16rpx;
    margin-right: 16rpx;
    margin-bottom: 0;
  }
  .shipping {
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.55);
  }
  .a_street {
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    margin-top: 24rpx;
  }
  .name {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.9);
    font-weight: 500;
  }
}
.desc .address-add {
  border: 1px solid rgba(0, 0, 0, 0);
  background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
  opacity: 1;
  border-radius: 44rpx;
  height: 88rpx;
  margin: 0 24rpx;
  text-align: center;
  line-height: 88rpx;
  font-size: 36rpx;
  color: #ffffff;
}
.icon-img {
  width: 48rpx;
  height: 48rpx;
}
</style>
